<!DOCTYPE html>
<html>

<head>
    <!-- 页面meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>商品编辑</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
  
    <link rel="stylesheet" href="/plugins/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="/plugins/adminLTE/css/AdminLTE.css">
    <link rel="stylesheet" href="/plugins/adminLTE/css/skins/_all-skins.min.css">
    <link rel="stylesheet" href="/css/style.css">
	<script src="/plugins/jQuery/jquery-2.2.3.min.js"></script>
    <script src="/plugins/bootstrap/js/bootstrap.min.js"></script>
    
    <!-- 富文本编辑器 -->
	<link rel="stylesheet" href="/plugins/kindeditor/themes/default/default.css" />
	<script charset="utf-8" src="/plugins/kindeditor/kindeditor-min.js"></script>
	<script charset="utf-8" src="/plugins/kindeditor/lang/zh_CN.js"></script>
    
    
      
    
    
</head>

<body class="hold-transition skin-red sidebar-mini" >

            <!-- 正文区域 -->
            <section class="content">

                <div class="box-body">

                    <!--tab页-->
                    <div class="nav-tabs-custom">

                        <!--tab头-->
                        <ul class="nav nav-tabs">                       		
                            <li class="active">
                                <a href="#home" data-toggle="tab">商品基本信息</a>                                                        
                            </li>   
                            <li >
                                <a href="#pic_upload" data-toggle="tab">商品图片</a>                                                        
                            </li>    
                            <li >
                                <a href="#customAttribute" data-toggle="tab">扩展属性</a>                                                        
                            </li>     
                            <li >
                                <a href="#spec" data-toggle="tab" >规格</a>                                                        
                            </li>                       
                        </ul>
                        <!--tab头/-->
						
                        <!--tab内容-->
                        <div class="tab-content">

                            <!--表单内容-->
                            <div class="tab-pane active" id="home">
                                <div class="row data-type">                                  
								   <div class="col-md-2 title">商品分类</div>
		                          
		                           	  <div class="col-md-10 data">
		                           	  	<table>
		                           	  		<tr>
		                           	  			<td>
		                           	  				<select class="form-control" id="one" onchange="getTwo(this.value)">
		                           	  				</select>
		                              			</td>
		                              			<td>
		                           	  				<select class="form-control select-sm" id="two" onchange="getThree(this.value)"></select>
		                              			</td>
		                              			<td>
		                           	  				<select class="form-control select-sm" id="three"></select>
		                              			</td>
		                              			<td>
													模板ID:<input readonly id="typeId" name="typeId">
		                              			</td>
		                           	  		</tr>
		                           	  	</table>
		                              	
		                              </div>	                              
		                          	  
									
		                           <div class="col-md-2 title">商品名称</div>
		                           <div class="col-md-10 data">
		                               <input type="text" class="form-control" id="goodsName" placeholder="商品名称" value="">
		                           </div>
		                           
		                           <div class="col-md-2 title">品牌</div>
		                           <div class="col-md-10 data">
		                              <select class="form-control" id="brand" >

									  </select>
		                           </div>
		
								   <div class="col-md-2 title">副标题</div>
		                           <div class="col-md-10 data">
		                               <input type="text" class="form-control" id="caption" placeholder="副标题" value="">
		                           </div>
		                           
		                           <div class="col-md-2 title">价格</div>
		                           <div class="col-md-10 data">
		                           	   <div class="input-group">
			                          	   <span class="input-group-addon">¥</span>
			                               <input type="text" class="form-control" id="price"  placeholder="价格" value="">
		                           	   </div>
		                           </div>
		                           
		                           <div class="col-md-2 title editer">商品介绍</div>
									<div class="col-md-10 data editer">
										<textarea name="content" style="width:800px;height:400px;visibility:hidden;"></textarea>
									</div>

		                           <div class="col-md-2 title rowHeight2x">包装列表</div>
		                           <div class="col-md-10 data rowHeight2x">
		                               
		                           	<textarea rows="4"  class="form-control" id="packageList"  placeholder="包装列表"></textarea>
		                           </div>
		                           
		                           <div class="col-md-2 title rowHeight2x">售后服务</div>
		                           <div class="col-md-10 data rowHeight2x">
		                               <textarea rows="4"  class="form-control" id="saleService"    placeholder="售后服务"></textarea>
		                           </div>                        
                                  
                                    
                                </div>
                            </div>
                            
                            <!--图片上传-->
                            <div class="tab-pane" id="pic_upload">
                                <div class="row data-type">                                  
								 <!-- 颜色图片 -->
								 <div class="btn-group">
					                 <button type="button" class="btn btn-default" title="新建" data-target="#uploadModal"  data-toggle="modal"  ><i class="fa fa-file-o"></i> 新建</button>
                             		                 
					             </div>
								 
								 <table class="table table-bordered table-striped table-hover dataTable">
					                    <thead>
					                        <tr>
					                            
											    <th class="sorting">颜色</th>
											    <th class="sorting">图片</th>
												<th class="sorting">操作</th>
							            </thead>
					                    <tbody id="tbody">
					                      <!--<tr>
									            <td><input readonly name="color"></td>
									            <td><img alt="" src="" width="100px" height="100px"></td>
												 <td> <button type="button" class="btn btn-default" title="删除" ><i class="fa fa-trash-o"></i> 删除</button></td> 
					                      </tr>-->
					                    </tbody>
								 </table> 
								  
                                </div>
                            </div>
                           
                           
                            <!--扩展属性-->
                            <div class="tab-pane" id="customAttribute">
                                <div class="row data-type" id="customAttributeDiv">
	                                <div>
										<div class="col-md-2 title">扩展属性1</div>
				                        <div class="col-md-10 data"><input class="form-control" placeholder="扩展属性1"></div>
	                                </div>
                                </div>
                            </div>
                      
                            <!--规格-->
                            <div class="tab-pane" id="spec">
                            	<div class="row data-type">
	                            	<div class="col-md-2 title">是否启用规格</div>
			                        <div class="col-md-10 data">
			                        	<input type="checkbox" >			                           
			                        </div>
                            	</div>
                            	<p>
                            	
                            	<div>
                            	
	                                <div class="row data-type" id="specList">          </div>
	
	                                
	                                <div class="row data-type">
	                                	 <table class="table table-bordered table-striped table-hover dataTable">
						                    <thead>
						                        <tr>
												    <th class="sorting">屏幕尺寸</th>
													<th class="sorting">网络制式</th>
												    <th class="sorting">价格</th>
												    <th class="sorting">库存</th>
												    <th class="sorting">是否启用</th>
												    <th class="sorting">是否默认</th>
											    </tr>
								            </thead>
						                    <tbody>
						                      <tr>
										            <td>
										            	4.0
										            </td>
													<td>
										            	3G
										            </td>
										            <td>
										           		<input class="form-control" id="price1" placeholder="价格">
										            </td>
										            <td>
										            	<input class="form-control" id="number1" placeholder="库存数量">
										            </td>
										            <td>
										             	<input type="checkbox" >
										            </td>
										            <td>
										                <input type="checkbox" >
										            </td>
						                      </tr>
											  <tr>
										            <td>
										            	4.0
										            </td>
													<td>
										            	4G
										            </td>
										            <td>
										           		<input class="form-control" id="price2" placeholder="价格">
										            </td>
										            <td>
										            	<input class="form-control" id="number2" placeholder="库存数量">
										            </td>
										            <td>
										             	<input type="checkbox" >
										            </td>
										            <td>
										                <input type="checkbox" >
										            </td>
						                      </tr>
											  <tr>
													<td>
										            	5.0
										            </td>
													<td>
										            	3G
										            </td>
										            <td>
										           		<input class="form-control" id="price3" placeholder="价格">
										            </td>
										            <td>
										            	<input class="form-control" id="number3" placeholder="库存数量">
										            </td>
										            <td>
										             	<input type="checkbox" >
										            </td>
										            <td>
										                <input type="checkbox" >
										            </td>
						                      </tr>
											  <tr>
													<td>
										            	5.0
										            </td>
													<td>
										            	4G
										            </td>
										            <td>
										           		<input class="form-control" id="price4" placeholder="价格">
										            </td>
										            <td>
										            	<input class="form-control" id="number4" placeholder="库存数量">
										            </td>
										            <td>
										             	<input type="checkbox" >
										            </td>
										            <td>
										                <input type="checkbox" >
										            </td>
						                      </tr>

						                    </tbody>
									 	</table>

	                                </div>
	                                
	                            </div>
                            </div>
                            
                        </div>
                        <!--tab内容/-->
						<!--表单内容/-->
							 
                    </div>
                 	
                 	
                 	
                 	
                   </div>
                  <div class="btn-toolbar list-toolbar">
				      <input onclick="addGoods()" type="button" class="btn btn-primary" value="保存" ><i class="fa fa-save"></i></input>
				      <button class="btn btn-default" >返回列表</button>
				  </div>
			
            </section>
            
            
<!-- 上传窗口 -->
<div class="modal fade" id="uploadModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog" >
	<div class="modal-content">
		<div class="modal-header">
			<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
			<h3 id="myModalLabel">上传商品图片</h3>
		</div>
		<div class="modal-body">							
			
			<table class="table table-bordered table-striped">
		      	<tr>
		      		<td>颜色</td>
		      		<td><input name="color" id="color" class="form-control" placeholder="颜色" >  </td>
		      	</tr>			    
		      	<tr>
		      		<td>商品图片</td>
		      		<td>
						<form id="myForm"  method="post" enctype="multipart/form-data">
						<table>
							<tr>
								<td>
								<input type="file" name="image" id="file" />
								<input type="button" onclick="uploadImage()" class="btn btn-primary" value="上传">
					            </td>
								<td id="t">
									<input type="hidden" id="url" name="url" value=" " />
								</td>
								<td id="td">
									<img  src="" width="200px" height="200px">
								</td>
							</tr>						
						</table>
						</form>
		      		</td>
		      	</tr>		      	
			 </table>				
			
		</div>
		<div class="modal-footer">						
			<button class="btn btn-success" onclick="saveImage()" data-dismiss="modal" aria-hidden="true">保存</button>
			<button class="btn btn-default" data-dismiss="modal" aria-hidden="true">关闭</button>
		</div>
	  </div>
	</div>
</div>

            
            <!-- 正文区域 /-->
<script type="text/javascript">

	//富文本编辑器
	var editor;
	KindEditor.ready(function(K) {
		editor = K.create('textarea[name="content"]', {
			allowFileManager : true
		});
	});


	$(function () {
		getOne()
	})
	//一级联动
	function getOne() {
		$.get("/goodsEditController/getOne",{id:0},function (data) {
			var data1 = data.data;
			var op = '<option value="-1">请选择</option>';
			for (let i = 0; i < data1.length ; i++) {
				$("#typeId").val(data1[i].typeId)
				op += '<option id="category1Id" value="'+data1[i].id+'">'+data1[i].name+'</option>'
			}
			$("#one").html(op)
			$("#two").html('<option value="-1">请选择</option>')
			getBrand()
		})
	}
	function getTwo(value) {
		$.get("/goodsEditController/getOne",{id:value},function (data) {
			var data1 = data.data;
			var op = '<option value="-1">请选择</option>';
			for (let i = 0; i < data1.length ; i++) {
				$("#typeId").val(data1[i].typeId)
				op += '<option id="category2Id" value="'+data1[i].id+'">'+data1[i].name+'</option>'
			}
			$("#two").html(op)
			$("#three").html('<option value="-1">请选择</option>')
			getBrand()
		})
	}
	function getThree(value) {
		$.get("/goodsEditController/getOne",{id:value},function (data) {
			var data1 = data.data;
			var op = '<option value="-1">请选择</option>';
			for (let i = 0; i < data1.length ; i++) {
				$("#typeId").val(data1[i].typeId)
				op += '<option id="category3Id" value="'+data1[i].id+'">'+data1[i].name+'</option>'
			}
			$("#three").html(op)
		})
		getBrand()
	}
	//获取信息
	function getBrand(){
		var typeId = $("#typeId").val();
		$.get("goodsEditController/getTemplate",{id:typeId},function (data) {

			//基本信息拼接
			var brand = JSON.parse(data.data.brandIds);
			var select = '<option>请选择品牌</option>';
			for (let i = 0; i < brand.length; i++) {
				select += '<option id="brandId" value="'+brand[i].id+'">'+brand[i].text+'</option>';
			}
			$("#brand").html(select)


			//扩展属性拼接
			var customAttributeItems = JSON.parse(data.data.customAttributeItems);
			var div = '';
			for (let i = 0; i < customAttributeItems.length; i++) {
				var d = '<div>\n' +
						'<div title="text" class="col-md-2 title">'+customAttributeItems[i].text+'</div>\n' +
						'<div class="col-md-10 data"><input   class="value" placeholder="扩展属性" title="value"></div>\n' +
						'</div>';
				div += d;
			}
			$("#customAttributeDiv").html(div)


			//规格拼接

			var specVoList = data.data.specVoList;
			var specList = '';
			$(specVoList).each(function (i, e) {
				specList += '<tr>';
				specList += '<td class="col-md-2 title">'+e.text+'</td>';
				specList += '<td class="col-md-10 data">';
				var optionList = e.optionList;
				$(optionList).each(function (j,v) {
					specList += '<span>'
					specList += '<input value="'+v.optionName+'" type="checkbox" >'+v.optionName;
					specList += '</span>'
				})
				specList += '</td>';
				specList += '</tr>';
			})
			$("#specList").html(specList);
		})
	}

	//上传图片
	function uploadImage(){
		var form = document.getElementById("myForm");
		var file = new FormData(form);
		$.ajax({
			url: "file/upload",
			type: "POST",
			processData:false,
			contentType:false,
			//重要部分，data的传的是整个表单，不用大括号包裹；不用自定义变量名
			data:file,
			success: function (date) {
				if (date.code == 10000){
					$("#td").html('<img src="'+date.data+'" width="200px" height="200px">')
					$("#t").html('<input type="hidden" id="url" name="url" value="'+date.data+'" />')
				}
			},error: function (data) {
				alert(data.message);
			}
		})
	}

	//商品图片拼接页面
	function saveImage() {
		var color = $("#color").val();
		var url = $("#url").val();
		var tbody ='<tr id="item_img">' +
				'<td><input class="inColor" readonly name="color" value="'+color+'"></td>\n' +
				'<td><input type="hidden" class="url" name="url" value="'+url+'" /></td>\n' +
				'<td><img src="'+url+'" width="100px" height="100px"></td>\n' +
				'<td> <button type="button" onclick="delTr(this)" class="btn btn-default" title="删除" ><i class="fa fa-trash-o"></i> 删除</button></td>' +
				'</tr>'
		$("#tbody").append(tbody)
	}
	function delTr(bt) {
		$(bt).parent().parent().remove();
	}

	//增加商品方法
	function addGoods() {

		var price1 = $("#price1").val();
		var price2 = $("#price2").val();
		var price3 = $("#price3").val();
		var price4 = $("#price4").val();
		var number1 = $("#number1").val();
		var number2 = $("#number2").val();
		var number3 = $("#number3").val();
		var number4 = $("#number4").val();

		var item = [];
		var numberList = [number1, number2, number3, number4];
		var priceList = [price1, price2, price3, price4];
		for (let i = 0; i < numberList.length; i++) {
			var jsonItem = {"num":numberList[i],"price":priceList[i],"title":'aaa'}
			item.push(jsonItem);
		}
		var tbItem = JSON.stringify(item);

		//规格增加
		var trList = $("#specList").find("tr");
		var bigArr = [];
		$(trList).each(function (i,e){
			var json = {};
			var tdList = $(e).find("td");
			json['attributeName'] = $(tdList[0]).text()
			var checkBoxArr = $(tdList[1]).find("input");
			var smallArr = [];
			$(checkBoxArr).each(function (i,v){
				if ($(v).prop("checked")){
					smallArr.push($(v).val())
				}
			})
			json['attributeValue']=smallArr;
			bigArr.push(json)
		})
		var specificationItems = JSON.stringify(bigArr);

		//扩展属性增加
		var text = $("div[title='text']");
		var list1 = [];
		for (let i = 0; i < text.length; i++) {
			list1.push(text[i].innerHTML);
		}
		var value = $(".value");
		var list2 = []
		for (let i = 0; i < value.length; i++) {
			list2.push({text:list1[i],value:value[i].value})
		}
		var customAttributeItems = JSON.stringify(list2);



		// 图片增加信息
		var colorList = $(".inColor");
		var urlList = $(".url");
		console.log(colorList)
		console.log(urlList)
		var itemImagesList = [];
		for (let i = 0; i < colorList.length; i++) {
			var json = {color:colorList[i].defaultValue, url:urlList[i].defaultValue}
			itemImagesList.push(json);
		}
		var itemImages = JSON.stringify(itemImagesList);



		//基本信息添加
		var goodsName = $("#goodsName").val();//商品名称
		var caption = $("#caption").val();//副标题
		var price = $("#price").val();//价格
		var packageList = $("#packageList").val();//包装列表
		var saleService = $("#saleService").val();//售后服务
		var category1Id = $("#one").val(); //一级类目
		var category2Id = $("#two").val();//二级类目
		var category3Id = $("#three").val();//三级类目
		var brandId = $("#brandId").val();//品牌
		var introduction =editor.html();//商品介绍
		var typeTemplateId = $("#typeId").val();//分类模板id
		$.ajax({
			url:"/goodsEditController/insertGoods",
			type: "POST",
			dataType: "json",
			data:{goodsName:goodsName,caption:caption,price:price,packageList:packageList,
				saleService:saleService,category1Id:category1Id,category2Id:category2Id,category3Id:category3Id,
				introduction:introduction,brandId:brandId,typeTemplateId:typeTemplateId,itemImages:itemImages,
				customAttributeItems:customAttributeItems,specificationItems:specificationItems,tbItem:tbItem},
			async: false,
			success: function (data) {
				if (data.code == 10000){
					alert(data.message);
				}else {
					alert(data.message);
				}
			}
		})
	}
</script>
       
</body>

</html>